<template>
    <div class="fm">
        <div class="top">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }"> homepage </el-breadcrumb-item>
                <el-breadcrumb-item>领养审批</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="flex justify-space-between mb-4 flex-wrap gap-4" style="margin-right: 16rem">
                <el-button v-for="button in buttons" :key="button.text" :type="button.type" link
                    @click="button.method">{{
                        button.text }}</el-button>
            </div>
        </div>
        <!-- 筛选 -->
        <div class="select" ref="select">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="用户名">
                            <el-input v-model="formInline.userName" placeholder="用户名" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="用户ID">
                            <el-input v-model="formInline.userID" placeholder="用户ID" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="宠物名">
                            <el-input v-model="formInline.petName" placeholder="宠物名" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="申请状态">
                            <el-select v-model="formInline.status" :placeholder="formInline.status">
                                <el-option label="待审批" value="待审批" />
                                <el-option label="通过审批" value="通过审批" />
                                <el-option label="审批不通过" value="审批不通过" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-button type="primary" @click="formSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="formattedPets" style="width: 100%; border-radius: 6rem">
            <el-table-column fixed prop="userId" size="big" label="用户ID" width="300" />
            <el-table-column prop="userName" label="用户" width="300" />
            <el-table-column prop="userState" label="用户状态" width="300" />
            <el-table-column prop="petName" label="宠物名称" width="300" />
            <el-table-column prop="userPhone" label="联系电话" width="300" />
            <el-table-column prop="status" label="申请状态" width="300" />
            <el-table-column prop="time" label="申请时间" width="300" />
            <el-table-column fixed="right" label="操作" width="150" class="cz" align="center">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click.stop="deletePet(scope.row._id)"><el-icon
                            size="14rem">
                            <Delete />
                        </el-icon></el-button>
                    <el-button link type="primary" size="small" @click.stop="updatePet(scope.row._id)"><el-icon
                            size="14rem">
                            <Edit />
                        </el-icon></el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination">
            <el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange"
                :page-size="8" v-model="current" />
        </div>

        <!-- 修改 -->
        <el-drawer v-model="drawer" title="修改领养" :direction="direction" size="50%" :before-close="handleClose2">
            <UpdateExamine @handleDraewr="handleDrawer" :filterPet="filterPet" :key="filterPet._id"></UpdateExamine>
        </el-drawer>
    </div>
</template>
<script setup>
import { getExamine, delExamine, selectExamine } from '@/utils/jia-axios'
import { ref, useTemplateRef, watch, computed } from 'vue'
import UpdateExamine from '@/components/pets/UpdateExamine.vue'
import { ElNotification } from 'element-plus'

// 总共多少个分页
const total = ref(0)
// 会话框，展示详情
const filterPet = ref(false)

// 获取pets列表
const pets = ref([])
getExamine().then((res) => {
    pets.value = res.data.list
    total.value = res.data.total
    console.log(res.data.list)
})

const formattedPets = computed(() => {
    return pets.value.map(pet => ({
        ...pet,
        userId: pet.users[0]?._id,
        userName: pet.users[0]?.username,
        userState: pet.users[0]?.userstate,
        petName: pet.pets[0]?.name,
        userPhone: pet.users[0]?.Phone,
        status: pet.status,
        time: pet.time
    }));
});

// 添加pet
import { ElMessageBox } from 'element-plus'
const drawer = ref(false)

const direction = ref('rtl')
const handleClose = (done) => {
    ElMessageBox.confirm('帖子还未添加，是否退出?')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}
const handleDrawer = () => {
    drawer.value = false
    getExamine(current.value).then((res) => {
        pets.value = res.data.list
        total.value = res.data.total
        // console.log(total.value)
    })
}

// 修改pet
const handleClose2 = (done) => {
    ElMessageBox.confirm('帖子还未修改，是否退出?')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}
const updatePet = (id) => {
    drawer.value = true
    
    filterPet.value = pets.value.find((item) => item._id == id)
    console.log(filterPet.value);
}

// 删除
const deletePet = async (id) => {
    await delExamine(id)
    getExamine().then((res) => {
        pets.value = res.data.list
        total.value = res.data.total
        // console.log(total.value)
        ElNotification({
            title: '删除成功',
            message: `成功删除一条数据`,
            type: 'success',
        })
    })
}

// 分页
const current = ref(1)
const handleCurrentChange = (newPage) => {
    current.value = newPage
}
watch(current, (newValue, oldValue) => {
    if (newValue != oldValue) {
        getExamine(current.value).then((res) => {
            pets.value = res.data.list
            total.value = res.data.total
            ElNotification({
                title: '查询成功',
                message: `查询到 ${pets.value.length} 条数据`,
                type: 'success',
            })
        })
    }
})

// 筛选
const select = useTemplateRef('select')
const flag = ref(false)
const handleSelectClose = () => {
    flag.value = !flag.value
    if (flag.value) {
        select.value.style.height = '140rem'
        select.value.style.visibility = 'inherit'
        select.value.style.opacity = '1'
    } else {
        select.value.style.height = '0'
        select.value.style.visibility = 'hidden'
        select.value.style.opacity = '0'
    }
}

const formInline = ref({
    userName: '',
    userID: '',
    petName: '',
    status: '待审批'
})

const formSubmit = (page) => {
    const { userName, userID, petName, status } = formInline.value
    selectExamine(userName, userID, petName, status).then((res) => {
        pets.value = res.data.list
        // console.log(res.data)
        total.value = res.data.total
        ElNotification({
            title: '查询成功',
            message: `查询到 ${pets.value.length} 条数据`,
            type: 'success',
        })
    })
}
const buttons = [
    // { type: 'primary', text: '添加', method: () => (drawer.value = true) },
    // { type: 'primary', text: '筛选', method: handleSelectClose },
]
</script>
<style lang="less">
@import url(../../css/table.css);

.pagination {
    width: 96%;
    display: flex;
    padding: 0 20rem;
    justify-content: end;
    margin-top: 20rem;
}

.el-form--inline .el-form-item {
    width: 100%;
}

.el-button,
.el-button.is-round {
    margin: auto;
    padding: 0 26rem;
}

.el-form {
    padding-top: 15rem;
}
</style>